<template>
  <div class="payment-method-container">

    <!-- 主要内容区域 -->
    <div class="content-section">
      <!-- 收款方式列表 -->
      <div class="section-title flex_between">
        <div class="ml5">收款方式列表</div>
        <div class="add-custom-section">
          <el-button type="text" @click="addCustomPayment" class="add-button">
            <i class="el-icon-plus"></i>
            <span>添加自定义收款方式</span>
          </el-button>
        </div>
      </div>
      <div class="payment-methods-card">
        <div v-for="(method, index) in paymentMethods" :key="index" class="payment-method-item flex_between">
          <div class="flex1">
            <!-- 线上支付开关 -->
            <template v-if="method.paytype == 'wxntv'">
              <h2 class="ml5 mb5"> 线上支付 </h2>
              <div class="online-payment-card">
                <div class="payment-item">
                  <div class="payment-info">
                    <div class="payment-name">微信支付</div>
                    <div class="payment-status">已开通线上支付</div>
                  </div>
                  <el-switch v-model="method.status" active-value="1" inactive-value="2" active-color="#4096ff"
                    inactive-color="#dcdfe6" style="--el-switch-width: 48px; --el-switch-height: 24px;"></el-switch>
                </div>
              </div>
            </template>
            <template v-if="method.paytype != 'wxntv' && index == 1">
              <h2 class="ml5 mb5"> 线下支付 </h2>
            </template>
            <div class="payment-methods-cell flex_between" v-if="method.paytype != 'wxntv'">
              <div class="method-info" @click="togglePaymentMethod(index)">
                <el-image class="method-icon"
                  :src="`static/icon/setting/${getMethodIcon(method.title)}.svg`"></el-image>
                <div class="method-name">{{ method.title }}</div>
              </div>
              <div class="payment-actions">
                <div class="custom-checkbox" :class="{
                  'checkbox-checked': method.status == 1
                }" @click.stop="togglePaymentMethod(index)">
                  <i v-if="method.status == 1" class="el-icon-check"></i>
                </div>
              </div>
            </div>

          </div>
          <div class="action-buttons ml10" v-if="method.paytype != 'wxntv'">
            <i class="el-icon-edit edit-btn" @click.stop="editPaymentMethod(method)"></i>
            <el-popconfirm confirm-button-text='确实' cancel-button-text='取消' :title="'确定要删除收款方式' + method.title + '吗？'"
              @confirm="deletePaymentMethod(method)">
              <i slot="reference" class="el-icon-delete delete-btn"></i>
            </el-popconfirm>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-section">
      <el-button type="primary" @click="savePaymentHandle" class="save-button">
        保存设置
      </el-button>
    </div>
    <el-dialog title="编辑收款方式" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" append-to-body
      :modal-append-to-body="false" :z-index="3000">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="名 称">
          <el-input v-model="editForm.title" placeholder="请输入收款方式名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, defineProps, defineEmits, watch, computed } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
const { proxy } = getCurrentInstance()
// 表单数据
const paymentForm = ref({
  onlineWechat: true
})

// 收款方式列表 - 添加isSystem字段标记系统默认收款方式
const paymentMethods = ref([])
const getPayLs = async () => {
  try {
    let res = await proxy.$api({ url: config.compset_pay_ls, data: { ch: 1 } })
    let result = res.data
    if (res.status == 1 && result) {
      paymentMethods.value = result.ls || result
    }
  } catch (error) { }
}
getPayLs()

// compset/pay_ls?
// token=c5703c4a8f680cfa0f42607e7ffdc9e2
// &app=app_imy
// &setid=b4i8u96q8i8m8s6ckkpv7hqi8
// &cpid=1
// &v=14-25040701
// &ch=1

// 编辑弹窗相关
const dialogVisible = ref(false)
const editForm = ref({ title: '', id: 0, status: 1 })

// 切换收款方式选择状态
const togglePaymentMethod = async (index) => {
  paymentMethods.value[index].status = paymentMethods.value[index].status == 1 ? 2 : 1;
}

const savePaymentHandle = async () => {
  let params = {
    ids: paymentMethods.value.map(vm => {
      if (vm.status == 1) {
        return vm.id
      }
    }).filter(vm => vm)
  }
  try {
    let res = await proxy.$api({ url: config.compset_pay_save_ids, data: params })
    if (res.status == 1) {
      proxy.$message({
        message: '保存成功',
        type: 'success'
      })
    }
    getPayLs()
  } catch (error) { }
}

// 添加自定义收款方式
const addCustomPayment = () => {
  dialogVisible.value = true
  editForm.value = { title: '', id: 0, status: 1 }
}

// 根据支付方式名称返回对应的图标
// qipay // 其他支付
// wxpay // 微信支付
// xjzfu // 现金支付
// yhk // 银行卡支付
// zfbpay // 支付宝支付
const getMethodIcon = (name) => {
  let txt = 'qipay'
  if (name.includes('微信')) {
    txt = 'wxpay'
  }
  if (name.includes('支付宝')) {
    txt = 'zfbpay'
  }
  if (name.includes('现金')) {
    txt = 'xjzfu'
  }
  if (name.includes('刷卡') || name.includes('银行') || name.includes('转账')) {
    txt = 'yhk'
  }
  return txt
}

const editPaymentMethod = (item) => {
  editForm.value = { ...item }
  dialogVisible.value = true
}

const confirmEdit = () => {
  if (editForm.value.title && editForm.value.title.trim()) {
    savePaymentSettings()
  } else {
    proxy.$message.error('请输入收款方式名称')
  }
}

const handleClose = () => {
  dialogVisible.value = false
}

const deletePaymentMethod = async (item) => {
  try {
    let res = await proxy.$api({ url: config.compset_pay_del, data: { id: item?.id } })
    if (res.status == 1) {
      getPayLs()
    } else {
      proxy.$message.error(res?.msg || '删除失败')
    }
  } catch (error) { }
}

const savePaymentSettings = async () => {
  let params = {
    ...editForm.value
  }
  try {
    let res = await proxy.$api({ url: config.compset_pay_save, data: params })
    if (res.status == 1) {
      dialogVisible.value = false
      getPayLs()
    }
  } catch (error) { }
}

onMounted(() => { })


</script>

<style lang="scss" scoped>
.payment-method-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

/* 内容区域样式 */
.content-section {
  flex: 1;
  padding: 16px 20px;
  overflow-y: auto;
  border-radius: 12px;
}

/* 线上支付卡片 */
.online-payment-card {
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(64, 150, 255, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(64, 150, 255, 0.2);
  }
}

.payment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.payment-name {
  font-size: 16px;
  font-weight: 600;
}

.payment-status {
  font-size: 13px;
}

/* 区域标题 */
.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-left: 6px;
  border-left: 3px solid #4096ff;
}

/* 收款方式卡片 */
.payment-methods-card {
  overflow: hidden;
  // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
  padding: 10px;
}

.payment-methods-cell {
  // width: 100%;
  flex: 1;
  padding: 14px 28px;
  border-bottom: 1px solid #f0f2f5;
  transition: background-color 0.2s ease;
  background-color: #fff;

  &:hover:not(.payment-disabled) {
    background-color: #f8f9ff;
  }
}

.payment-method-item {
  border-radius: 0;

  &:last-child {
    border-bottom: none;
  }

  &:first-child .payment-methods-cell {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  &:last-child .payment-methods-cell {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
}

.payment-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.method-info {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-sizing: border-box;
}

.method-icon {
  height: 32px;
  width: 32px;
}

.method-name {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

/* 支付操作区域 */
.payment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  // width: 80px;
}

/* 自定义复选框 */
.custom-checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: white;

  &.checkbox-checked {
    background-color: #4096ff;
    border-color: #4096ff;
    color: white;
  }

  &.checkbox-disabled {
    cursor: not-allowed;
  }
}

/* 操作按钮区域 */
.action-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.edit-btn {
  color: #67c23a;
  padding: 0 8px;
  font-size: 20px;
}

.delete-btn {
  color: #f56c6c;
  padding: 0 8px;
  font-size: 20px;
}

/* 添加自定义收款方式 */
.add-custom-section {
  text-align: center;
  margin-top: 8px;
}

.add-button {
  font-size: 14px;
  color: #4096ff;
  padding: 8px 16px;
  border-radius: 6px;
  background-color: #ecf5ff;
  transition: all 0.2s ease;

  &:hover {
    background-color: #4096ff;
    color: white;
    transform: translateY(-1px);
  }

  i {
    margin-right: 4px;
  }
}

/* 底部保存按钮 */
.footer-section {
  padding: 16px 20px;
  background-color: white;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.02);
}

.save-button {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(135deg, #4096ff 0%, #69b1ff 100%);
  border: none;
  color: white;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(64, 150, 255, 0.2);

  &:hover {
    background: linear-gradient(135deg, #3a8ee6 0%, #5da9ff 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(64, 150, 255, 0.3);
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(64, 150, 255, 0.2);
  }
}
</style>